<template>
  <div
    :class="[
      bem.b(),
      bem.is('border', $props.border),
      bem.is('shadow', $props.shadow),
    ]"
  >
    <div class="" style="display: block">
      <slot></slot>
    </div>

    <TableHead></TableHead>
    <TableBody></TableBody>
  </div>
</template>

<script setup lang="ts">
import { inject, provide } from 'vue';
import { createNamespace } from '../libs/bem';
import {
  props,
  useTableContext,
  tableContextInjectKey,
  type ExtraTableEmits,
} from './table';

import TableHead from '../table-head/table-head.vue';
import TableBody from '../table-body/table-body.vue';
import { easyTableContextKey } from '../../../easy-table/src/easy-table';

defineOptions({ name: 'extra-table' });
const bem = createNamespace('extra-table');
const $props = defineProps(props);
const $emits = defineEmits<ExtraTableEmits>();
const tableContext = useTableContext($props, $emits);

provide(tableContextInjectKey, tableContext);

if ($props.expandId) {
  const easyTableContext = inject(easyTableContextKey, undefined);
  easyTableContext?.registryExtra(tableContext, $props.expandId);
}

const { setData, getData } = tableContext;
defineExpose({
  setData,
  getData,
});
</script>

<style>
@import url(../style/index.scss);
</style>
<style scoped></style>
